<template>
  <div>
    <!-- gutter指定每一行的间隔 -->
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="grid-content bg-purple input">
          <el-input
            placeholder="请搜索车位"
            v-model="selectContent"
            size="10"
            clearable
          >
          </el-input>
        </div>
      </el-col>

      <!-- 查询与导出按钮 -->
      <el-col :span="18">
        <el-col :span="2.5">
          <div class="grid-content bg-purple">
            <el-button
              type="primary"
              plain
              icon="el-icon-search"
              @click="select()"
              >查询</el-button
            >
          </div>
        </el-col>
        <el-col :span="2.5">
          <download-excel
            :data="tableData"
            :fields="json_fields"
            type="xlsx"
            worksheet="My Worksheet"
            name="车位信息.xls"
          >
            <el-button type="primary" plain icon="el-icon-download"
              >导出</el-button
            >
          </download-excel>
        </el-col>
      </el-col>
    </el-row>
    <!-- 分割线 -->
    <el-divider></el-divider>
    <el-table
      :data="tableData"
      stripe
      style="width: 100%"
      class="table"
      height="500"
      max-height="500"
      highlight-current-row
      :header-row-style="getRowClass"
      :header-cell-style="getRowClass"
      id="out_table"
    >
      <el-table-column
        prop="status"
        label="状态"
        width="180"
        :filters="[
          { text: '空闲', value: '空闲' },
          { text: '已停车', value: '已停车' },
        ]"
        :filter-method="filterTag"
        filter-placement="bottom-end"
      >
        <template slot-scope="scope">
          <div
            slot="reference"
            class="name-wrapper"
            v-if="scope.row.status === '空闲'"
          >
            <el-tag size="medium" type="success">{{ scope.row.status }}</el-tag>
          </div>
          <div slot="reference" class="name-wrapper" v-else>
            <el-tag size="medium" type="danger">{{ scope.row.status }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="lotId" label="编号" width="180" sortable>
      </el-table-column>
      <el-table-column prop="floor" label="楼层" width="180"> </el-table-column>
      <el-table-column prop="operateTime" label="操作时间"> </el-table-column>
      <!-- 编辑 删除操作 -->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            icon="el-icon-edit"
            circle
            @click="handleEdit(scope.$index, scope.row)"
          ></el-button>
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            circle
            @click="handleDelete(scope.$index, tableData)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 底部添加按钮 -->
    <div class="addbtn">
      <el-button
        type="primary"
        icon="el-icon-plus "
        circle
        @click="dialogFormVisible = true"
      ></el-button>
    </div>

    <el-dialog title="车位信息" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="车位状态" :label-width="formLabelWidth">
          <el-select v-model="form.status" placeholder="请选择车位状态">
            <el-option label="空闲" value="空闲"></el-option>
            <el-option label="已停车" value="已停车"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="编号" :label-width="formLabelWidth">
          <el-input v-model="form.lotId" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="楼层" :label-width="formLabelWidth">
          <el-input v-model="form.floor" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="操作时间" :label-width="formLabelWidth">
          <el-date-picker
            v-model="form.operateTime"
            type="datetime"
            placeholder="选择日期时间"
            align="right"
            :picker-options="pickerOptions"
            value-format="yyyy/MM/dd HH:MM:SS"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>

      <!-- 底部 确定取消 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add()">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 停车信息修改 -->
    <el-dialog title="车位信息修改" :visible.sync="dialogFormVisible1">
      <el-form :model="form">
        <el-form-item label="车位状态" :label-width="formLabelWidth">
          <el-select v-model="form.status" placeholder="请选择车位状态">
            <el-option label="空闲" value="空闲"></el-option>
            <el-option label="已停车" value="已停车"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="编号" :label-width="formLabelWidth">
          <el-input v-model="form.lotId" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="楼层" :label-width="formLabelWidth">
          <el-input v-model="form.floor" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="操作时间" :label-width="formLabelWidth">
          <el-date-picker
            v-model="form.operateTime"
            type="datetime"
            placeholder="选择日期时间"
            align="right"
            :picker-options="pickerOptions"
            value-format="yyyy/MM/dd HH:MM:SS"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>

      <!-- 底部 确定取消 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="update()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Axios from "axios";
export default {
  data() {
    return {
      //搜索框内容
      selectContent: "",
      // 修改索引
      index: 0,
      //   表格数据
      tableData: [],
      tableDataClear: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      //   dialog信息
      dialogFormVisible: false,
      dialogFormVisible1: false,
      form: {
        status: "",
        lotId: "",
        floor: "",
        operateTime: "",
      },
      formClear: {
        status: "",
        lotId: "",
        floor: "",
        operateTime: "",
      },

      formLabelWidth: "80px",

      // 导出数据
      json_fields: {
        状态: "status",
        编号: "lotId",
        楼层: "floor",
        操作时间: "operateTime",
      },
    };
  },
  methods: {
    // update
    handleEdit(index, row) {
      // console.log(index, row);
      this.dialogFormVisible1 = true;
      this.form = row;
      this.index = index;
    },
    update() {
      this.dialogFormVisible1 = false;
      this.tableData[this.index] = this.form;
      //向数据库添加信息
      Axios.put("http://localhost:8080/do/carlot", this.form);
      this.$message({
        message: "修改成功",
        type: "success",
        center: true,
      });
      this.form = this.formClear;
    },
    // delete
    handleDelete(index, rows) {
      // console.log(index, rows);
      //confirm打开消息提示
      this.$confirm("此操作将永久删除该条信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(rows[index]);
          //数据库中执行
          Axios.delete("http://localhost:8080/do/carlot", {
            params: { id: rows[index].lotId },
          });
          rows.splice(index, 1);
          this.$message({
            type: "success",
            message: "删除成功!",
            center: true,
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
            center: true,
          });
        });
    },
    // add
    add() {
      this.dialogFormVisible = false;
      //   console.log(this.form.carId);
      this.tableData.unshift(this.form);
      //数据库中执行
      Axios.post("http://localhost:8080/do/carlot", this.form);
      this.form = this.formClear;
      this.$message({
        message: "添加成功",
        type: "success",
        center: true,
      });
    },
    // select
    select() {
      // console.log('select');
      if (this.selectContent === "") {
        this.tableData = this.tableDataClear;
        return;
      }
      //   console.log("object");
      this.tableData = this.tableDataClear.filter(
        (item) => item.lotId.indexOf(this.selectContent) !== -1
      );
      this.selectContent = "";
    },
    filterTag(value, row) {
      return row.status === value;
    },
    getRowClass({ row, column, rowIndex, columnIndex }) {
      return "background:#f0f2f5;";
    },
  },
  async created() {
    //查询车位
    const { data } = await Axios.get("http://localhost:8080/do/carlot");
    this.tableData = data;
    this.tableDataClear = data;
    // console.log(data);
  },
};
</script>

<style scoped>
.table {
  margin-top: 10px;
}

.el-row {
  margin-left: 10px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  /* background: #d3dce6; */
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.addbtn {
  margin-top: 12px;
  margin-left: 15px;
}
</style>
